import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:speed_random/app_styles.dart';
import 'package:speed_random/common/common_fuc.dart';
import 'package:speed_random/pages/home/rand_com/com_results/view.dart';
import 'package:speed_random/pages/home/rand_com/view_set.dart';
import 'package:speed_random/widgets/row_two_buttons.dart';

import 'logic.dart';
import 'state.dart';


class ViewBodyColor extends StatelessWidget {

  final RandComLogic logic;
  final RandComState state;

  const ViewBodyColor({Key? key, required this.logic, required this.state}) : super(key: key);




    // ... 已有代码 ...

@override
Widget build(BuildContext context) {
  return Obx(() =>Card(
    color:state.randomNumbers.length<2 && state.randomNumbers.length>0?commonFuc.hexToColor(state.randomNumbers.first):AppStyles.colorPagebg,
    // 使用 Obx 响应式组件
    child:
    state.randomNumbers.length<2?
    Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 遍历 state.randomNumbers 列表，为每个元素创建一个 Text 组件
        ...state.randomNumbers.map((number) => Text(
          '$number',
          style: TextStyle(
              fontSize:commonFuc.calculateFontSize(number.toString(),context),
              color:Colors.white,
              fontWeight: FontWeight.bold
          ),
        )).toList()
      ],
    )
        :
    GridView.builder(
      // 限制滚动，避免与 Scaffold 滚动冲突
      shrinkWrap: true,
      // 每行显示 2 列
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        // 水平间距
        crossAxisSpacing: 8.0,
        // 垂直间距
        mainAxisSpacing: 8.0,
      ),
      // 设置列表项数量
      itemCount: state.randomNumbers.length,
      // 构建每个列表项
      itemBuilder: (context, index) {
        final number = state.randomNumbers[index];
        final indexnum = index+1;
        return Center(
          child: Container(
            // 添加边框
            decoration: BoxDecoration(
              color: commonFuc.hexToColor(number),
              /*border: Border.all(
                      color: AppStyles.colorPageText,
                      width: 1,
                    ),*/
              borderRadius: BorderRadius.circular(8),
            ),
            padding: const EdgeInsets.all(5),
            margin:  EdgeInsets.only(left: index%2==0?10:0, right: index%2==0?0:10, top: 10, bottom: 0),
            child: Stack(
              children: [
                Center(
                  child: Text(
                    '$number',
                    style: TextStyle(
                      fontSize: 40,
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
                // 左上角显示 index 小标
                Positioned(
                  top: 0,
                  left: 0,
                  child: Container(
                    padding: const EdgeInsets.all(4),
                    /*decoration: BoxDecoration(
                            color: AppStyles.colorAppBarbg,
                            shape: BoxShape.circle,
                          ),*/
                    child: Text(
                      '$indexnum',
                      style: TextStyle(
                        fontSize: 10,
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),

        );
      },
    ),

  ));
}

// ... 已有代码 ...






}


